import { useEffect, useRef } from "react"
import * as echarts from "echarts"


const PublicCharts = ({
    optionData
}) => {
    // 渲染实例函数
    const chartRef = useRef(null);
    let chartInstance = null;
    function renderChart() {
        try {
            // `echarts.getInstanceByDom` 可以从已经渲染成功的图表中获取实例，其目的就是在 options 发生改变的时候，不需要
            // 重新创建图表，而是复用该图表实例，提升性能，因为所有的图表不一样的就只是option数据。
            const renderedInstance = echarts.getInstanceByDom(chartRef.current);
            if (renderedInstance) {
                chartInstance = renderedInstance;
            } else {
                chartInstance = echarts.init(chartRef.current);
            }
            chartInstance.setOption(optionData);
        } catch (error) {
            console.error("error", error.message);
            chartInstance && chartInstance.dispose();
        }
    }

    useEffect(() => {
        //在组件初始化已经获取到数据的时候渲染图表
        renderChart();

        return () => {
            // 销毁图表实例，释放内存
            chartInstance && chartInstance.dispose();
        };
    }, [])

    // 定义窗口大小发生改变执行的回调函数
    function resizeHandler() {
        chartInstance.resize();
    }

    useEffect(() => {
        window.addEventListener("resize", resizeHandler);

        // 组件销毁时移除监听事件
        return () => {
            window.removeEventListener("resize", resizeHandler);
        }
    })


    return (
        <div>
            <h2>publicCharts</h2>
            <div
                ref={chartRef}
                style={{ height: "400px" }}
            >
            </div>
        </div>

    )
}

export default PublicCharts